<template>
  <div>
    <span>AI电话选择：</span>
    <a-button @click="showModal" type="primary" class="btn"
      >+&nbsp;添加</a-button
    >
   
<div ref="model" class="model">
      <a-modal
      :visible="visible"
      title="AI电话选择"
      @ok="handleOk"
      @cancel="handleOk"
      :footer="null"
      :getContainer='()=>$refs.model'
    >
      <a-form :model="formData">
        <a-row>
          <a-col :span="8">
            <a-form-item label="搜索名称">
              <a-input
                style="width: 180px"
                v-model:value="formData.searchName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="营销短信ID">
              <a-input
                placeholder="请输入AI电话ID"
                style="width: 200px"
                v-model:value="formData.searchId"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-button type="primary" size="small" @click="addMore"
              >+批量添加</a-button
            >
          </a-col>
          <a-col :span="12">
            <a-button size="small" class="btn-right" @click="reset"
              >重置</a-button
            >
            <a-button
              type="primary"
              size="small"
              class="btn-right"
              @click="search"
              >查询</a-button
            >
          </a-col>
        </a-row>
        <a-row style="margin-top: 10px">
          <a-table
            :pagination="pagination"
            :columns="columns"
            :data-source="datalist"
            :footer="null"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :rowKey="
              (record, index, key) => {
                return record.awardid;
              }
            "
            style="width: 1200px"
          >
          <span slot="add" slot-scope="text,record">
             <a class="btn" @click="addFn(record)">添加</a>
          </span>
            <!-- <template #add="{ record }">
              <a class="btn" @click="addFn(record)">添加</a>
            </template> -->
            <!-- > -->
          </a-table>
        </a-row>
      </a-form>
    </a-modal>
</div>
      <a-table
    bordered
    :columns="columns1"
    :data-source="discountList"
    style="width: 1100px; margin-top: 10px"
    :pagination="false"
    v-if="discountList.length > 0"
  >
  <span slot="add" slot-scope="text,record">
    <a class="btn" @click="delFn(record)">删除</a>
  </span>
  </a-table>
  </div>

</template>
<script>
import { getVoucherList } from "@/api/task/taskscene.js";

const columns = [
  {
    title: "AI电话ID",
    dataIndex: "awardid",
    key: "awardid",
  },
  {
    title: "AI电话标题",
    dataIndex: "vouName",
    key: "vouName",
  },
  {
    title: "使用场景",
    dataIndex: "description",
    key: "description",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width:"10%",
    scopedSlots: {
      customRender: "add",
    },
  },
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
export default {
  props:['ticketIdList'],
  components: {  },
  data() {
    return {
       current: 1,
        size: 10,
      columns1: [
        // {
        //   title:"序号",
        //   key:"index",
        //   customRender:(text)=>{
        //     return text.index+1
        //   }
        // },
        {
    title: "营销短信ID",
    dataIndex: "awardid",
    key: "awardid",
  },
  {
    title: "营销短信标题",
    dataIndex: "vouName",
    key: "vouName",
  },
  {
    title: "使用场景",
    dataIndex: "description",
    key: "description",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width:"10%",
    scopedSlots: {
      customRender: "add",
    }
  },
      ],
      lists: [],
      discountList: [
      ],
      multiple:[],
      formData: {
        searchName: "",
        searchId: "",
      },
      visible: false,
      datalist: [],
      columns,
      Type: "不限",
      rowSelection,
      btnId: "",
      expandedRowKeys: [],
      selectedRowKeys: [],
      discountType: [
        { label: "不限", value: 1 },
        { label: "优惠券", value: 2 },
        { label: "现金券", value: 3 },
      ],
      pagination: {
        //表格自带分页器的属性定义
       pageNo: 1,
        pageSize: 10,//默认每页显示10条数据
        total:0,
        showTOtal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: [ "10", "20", "30","40"], //自定义每页显示多少条数据
        showQuickJumper: true, //允许跳转至xx页
         onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件
      },
    };
  },

  methods: {
    onPageChange(page, pageSize) {
      this.pagination.pageNo = page
       this.getCouponDatas()
   },
   onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1
       this.pagination.pageSize = pageSize
        this.getCouponDatas()
   } ,
    addMore() {
      this.discountList.push(...this.multiple) 
      console.log(this.discountList);
      this.sendChooseData();
      this.visible = false;
       (this.selectedRowKeys = []);
      
    },
    delFn(e) {
     this.discountList.splice(this.discountList.indexOf(e),1)
     this.sendChooseData();
      console.log(this.discountList);
    },
    addFn(e) {
      
      this.discountList.push(e);
      this.sendChooseData();
      console.log(this.discountList);
       (this.selectedRowKeys = []);
        this.visible = false;
    },
    sendChooseData(){
      this.$emit("chooseData",this.discountList);
    },
    // 点击显示弹窗
    showModal() {
      this.getCouponDatas();
      this.visible = true;
    },
    handleChange(value) {
      console.log(value);
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      (this.formData.searchName = ""),
        (this.formData.searchId = ""),
        (this.selectedRowKeys = []);
      this.formData.discountType = null;
    
     
    },
    onSelectChange: function (selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      let datas = JSON.parse(JSON.stringify(selectedRows));
      this.multiple = datas;
      // 赋值同步本地data接受数据(这里只取id即可)
      this.selectedRowKeys = selectedRowKeys;
    },

    reset() {
      (this.formData.searchName = ""),
        (this.formData.searchId = ""),
        (this.selectedRowKeys = []);
      this.formData.discountType = null;
      this.getCouponDatas();
    },
    search() {
      this.getCouponDatas();
    },
    // 获取优惠券列表数据
    getCouponDatas() {
      let current=this.pagination.pageNo;
      let size=this.pagination.pageSize
      let couponName = this.formData.searchName;
      let searchId = this.formData.searchId;
      let ids = [];
      if (searchId) {
        ids.push(searchId);
      }

      let data = {
        current:current,
        size: size,
        awardIds: ids,
        couponName: couponName,
        types: [],
      };
      console.log(data);
      getVoucherList(data, (res) => {
        console.log(res);
         this.pagination.total=res.data.total
        res.data.records.map((item) => {
          if (item.couType == "VOU4") {
            item.couType = "折扣券";
          } else if (item.couType == "VOU3") {
            item.couType = "现金券";
          }
        });
        console.log(res);
        this.datalist = res.data.records;
      });
    },
  },
  created() {
    this.getCouponDatas();
    if(this.ticketIdList){
      let data = JSON.parse(JSON.stringify(this.ticketIdList))
    console.log('data',data)
    this.discountList = data;
    }else{
      return
    }
    
    
  },
};
</script>
<style scoped lang="less">

.btn-right {
  width: 70px;
  margin-right: 10px;
  float: right;
}

.ant-table-thead {
  font-weight: bold !important;
  text-align: center;
}
.ant-form-item{
  display: flex;
}
div /deep/ .model .ant-modal{
  width: 1300px !important;
}
</style>
